<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>响应式网站布局</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial;
      padding: 10px;
      background: #f1f1f1;
    }

    /*页眉 blog 标题*/
    .header {
      padding: 30px;
      text-align: center;
      background: white;
    }

    .header h1 {
      font-size: 50px;
    }

    /*设置上导航栏的样式*/
    .topnav {
      overflow: hidden;
      background-color: #333;
    }

    /*  设置topnav链接的样式*/
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    /*改变鼠标悬停时的颜色*/
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    /*  创建两个不相等的彼此并排的浮动列*/
    /*  左列*/
    .leftcolumn {
      float: left;
      width: 75%;
    }

    /*  右列*/
    .rightcolum {
      float: left;
      width: 25%;
      background-color: #f1f1f1;
      padding-left: 20px;
    }

    /*伪图像*/
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }

    /*为文章添加卡片效果*/
    .card {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
    }

    /*清除列之后的浮动*/
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /*页脚*/
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
      margin-top: 20px;
    }

    /*  响应式布局 - 当屏幕的宽度小于800像素时,使得两列堆叠而不是并排*/
    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolum {
        width: 100%;
        padding: 0;
      }
    }

    /*  响应式布局 - 当屏幕的宽度小于400像素时,使导航链接堆叠而不是并排*/
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }

    }
  </style>
</head>
<!--
创建一个自适应的网站布局,会根据屏幕宽度切换两列与全宽列
网站布局
网站通常分为页眉,菜单,内容,和页脚
      页眉
      导航栏
内容  主内容   内容
      页脚

以上结构是最常见的结构
页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：
导航栏(topnav)包含链接列表，以帮助访问者浏览您的网站：
内容
使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

1-列布局（通常用于移动浏览器）
2-列布局（通常用于平板电脑和笔记本电脑）
3-列布局 （仅用于台式机）

css 单位 有几种表示长度不同单位
使用 px像素 设置不同长度值
数字 和单位之间不能出现空格 但是如果值为0 则可以省略单位
对于某些css属性 允许使用负的长度
长度单位有两种类型 绝对单位和相对单位
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
* 像素px是相对于观看设备的 对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局

相对长度
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

什么是特异性？
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。

特异性层次
每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：<h1 style="color: #ffffff;">。

ID - ID 是页面元素的唯一标识符，例如 #navbar。

类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。

元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

如何计算特异性？
请您牢记计算特异性的方法！

从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。

请思考以下三个代码片段：
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
A 的特异性为 1（一个元素）
B 的特异性为 101（一个 ID 引用以及一个元素）
C 的特异性为 1000（行内样式）
由于 1 < 101 < 1000，因此第三条规则（C）具有更高的特异性，所以将被应用。

特异性规则 1：
在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用：

实例
h1 {background-color: yellow;}
h1 {background-color: red;}
红色被应用

特异性规则 2：
ID 选择器比属性选择器拥有更高的特异性 - 请看以下三行代码：

实例
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

id选择器> id值>元素
特异性规则 3：
上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。所以在以下情况下：

实例
来自外部 CSS 文件：

#content h1 {background-color: red;}
在 HTML 文件中：

<style>
#content h1 {
  background-color: yellow;
}
</style>
文件内的样式要大于外部的样式
特异性规则 4：
类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）：

实例
.intro {background-color: yellow;}
h1 {background-color: red;}

此外，通用选择器以及被继承的值拥有 0 - * 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。


-->
<body>
<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float: right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height: 200px">Image</div>
      <p>Some text...</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco.</p>
    </div>
  </div>
  <div class="rightcolum">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeing" style="height: 100px">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>
</body>
</html>
